<template>
  <div class="select-tree-file h100p"
       @mouseup="onMouseUp"
       @mousemove="onMouseMove"
       onselectstart="return false"
  >

    <div class="move-container"
         :style="cursorPosition"
         v-if="showDragContainer"
    ></div>
    <splitpanes>
      <pane style="min-width: 120px" class="box-shadow-thick">
        <gnb-tree/>
      </pane>
      <pane style="min-width: 120px;">
        <gnb-list/>
      </pane>
    </splitpanes>
  </div>
</template>

<script lang="ts">
import GnbTree from "@/components/gnb-tree.vue";
import GnbList from "@/components/gnb-list.vue";
import {ref, reactive, computed} from "vue";
import {useStore} from "vuex";
import {debounce} from "@/utils/throttle-debounce.utils";

export default {
  name: 'select-tree-file',
  mixins: [],
  components: {GnbList, GnbTree},
  props: {},
  data() {
    return {}
  },
  setup() {
    const store = useStore();

    const onMouseUp = debounce((e) => {
      const {source, target} = store.state.drag;
      store.dispatch("clearTargetSource");
      showDragContainer.value = false;
    });

    const onMouseMove = (e) => {
      const {source} = store.state.drag;
      if (!source) return;
      showDragContainer.value = true;
      cursorPosition.value = {
        left: e.clientX + 15 + 'px',
        top: e.clientY + 15 + 'px',
      }
    };

    const showDragContainer = ref(false);

    const cursorPosition = ref({left: 0 + 'px', top: 0 + 'px'});

    return {
      onMouseUp,
      onMouseMove,
      cursorPosition,
      showDragContainer,
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  beforeUnmount() {
  },
  activated() {
  },
  deactivated() {
  },
  methods: {}
};
</script>

<style scoped lang="less">
.select-tree-file {

}

.move-container {
  position: fixed;
  border: 4px dashed fade(#000, 30%);
  height: 20px;
  width: 40px;
  z-index: 100;
}
</style>